<template>
  <div class="infinite-container express">
   <mu-list class="bgwhite">
      <mu-list-item title="收货人姓名">
        <mu-text-field v-model="form.realName" slot="right" class="mt15" inputClass="text-right" hintText="请输入姓名" :disabled="disabled"></mu-text-field>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="手机号码">
        <mu-text-field v-model="form.phoneNumber" slot="right" class="mt15" inputClass="text-right" hintText="请输入手机号" :disabled="disabled"></mu-text-field>
      </mu-list-item>

      <mu-divider></mu-divider>

     <mu-list-item title="所在地区">
       <div slot="right" class="text-center" @click="showAddressPicker = true">
         <span v-if="!form.province">选择省市</span>
         <span v-else>{{form.province.title}} / {{form.city.title}}/ {{form.area.title}}</span>
         <i class="iconfont icon-small-arrow-right"/>
       </div>
     </mu-list-item>

      <mu-divider/>

      <mu-list-item title="详细地址">
        <mu-text-field v-model="form.addressDetail" slot="right" class="mt15"  inputClass="text-right" hintText="请输入详细地址" :disabled="disabled"></mu-text-field>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item>
        <mu-switch label="设为默认地址" v-model="toggle" class="demo-switch" />
      </mu-list-item>
      <mu-divider></mu-divider>

   </mu-list>
    <div class="pd20 login">
        <mu-raised-button label="保存" @click="savaAction" fullWidth primary class="btn-login">
        </mu-raised-button>
      <div class="mt10"></div>
        <mu-raised-button label="删除" @click="deleteConfirmDialog = true" fullWidth secondary class="btn-login" v-show="action != 'add'">
        </mu-raised-button>
    </div>

    <popup :show="showAddressPicker" @hidePopup="hidePopup">
      <select-city @setLocation="setLocation"></select-city>
    </popup>

    <mu-dialog :open="deleteConfirmDialog" title="提示" @close="closeDCDialog">
      确定删除该收获地址吗？
      <mu-flat-button slot="actions" @click="closeDCDialog" primary label="取消"/>
      <mu-flat-button slot="actions" primary @click="deleteAction" label="确定"/>
    </mu-dialog>
  </div>
</template>

<script>
import {testEmpty, testPhone} from '../../common/js/util'
import {commonAjaxJson, PLATFORM_PREFIX, RESTFUL_API} from '../../api/api'
import selectCity from '@/components/selectCity'
import popup from '@/components/BsPopup'
export default {
  components: {selectCity, popup},
  mounted () {
    let action = this.$route.query.action
    this.action = action
    if (action !== 'add') {
      let addressModel = JSON.parse(localStorage.modifyAddress || '{}')
      this.addrId = addressModel.id
      this.form = {
        realName: addressModel. consigneeName,
        phoneNumber: addressModel.consigneePhone,
        addressDetail: addressModel.detailedAddress,
        province: {
          title: addressModel.province,
          id: addressModel.provinceId
        },
        city: {
          title: addressModel.city,
          id: addressModel.cityId
        },
        area: {
          title: addressModel.county,
          id: addressModel.countyId
        }
      }
      this.toggle = addressModel.isDefault == 1
    }
  },
  data () {
    return {
      action: '',
      showAddressPicker: false,
      disabled: false,
      familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
      addrId: '',
      toggle: true,
      form: {
        realName: '',
        phoneNumber: '',
        addressDetail: '',
        zipcode: '',
        province: '',
        city: '',
        area: '',
        address: ''
      },
      code: {
        province: '',
        city: '',
        area: ''
      },
      deleteConfirmDialog: false
    }
  },
  methods: {
    hidePopup () {
      this.showAddressPicker = false
    },
    closeDCDialog () {
      this.deleteConfirmDialog = false
    },
    deleteAction () {
      console.log('deleteAddress')
      commonAjaxJson(RESTFUL_API.delete, {id: this.addrId, userId: sessionStorage.getItem('userId')}, true).then(res => {
        if (res.data.code == 200) {
          const redirect = this.$route.query.redirect
          this.deleteConfirmDialog = false
          this.$store.commit('UPDATE_TOAST', {
            message: '删除成功',
            fn: () => this.$router.replace(redirect || '/setting/addresses')
          })
        }
      })
    },
    setLocation (val) {
      this.form.province = val.province
      this.form.city = val.city
      this.form.area = val.area
      this.showAddressPicker = false
    },
    saveOrUpdate (params) {
      commonAjaxJson(RESTFUL_API.saveOrUpdate, params, true).then(res => {
        if (res.data.code == 200) {
          const redirect = this.$route.query.redirect
          this.$store.commit('UPDATE_TOAST', {
            message: '保存成功',
            fn: () => this.$router.replace(redirect || '/setting/addresses')
          })
        } else {
          this.$store.commit('UPDATE_TOAST', {message: res.data.message})
        }
      })
    },
    savaAction () {
      if (testEmpty(this.form.realName)) {
        this.$store.commit('UPDATE_TOAST', {message: '请填写收件人姓名'})
        return false
      }
      if (!testPhone(this.form.phoneNumber)) {
        this.$store.commit('UPDATE_TOAST', {message: '请输入有效的手机号'})
        return false
      }
      if (testEmpty(this.form.addressDetail)) {
        this.$store.commit('UPDATE_TOAST', {message: '请填写详细地址'})
        return false
      }

      let params = {
        userId: sessionStorage.getItem('userId'),
        consigneeName: this.form.realName,
        consigneePhone: this.form.phoneNumber,
        province: this.form.province.title,
        city: this.form.city.title,
        county: this.form.area.title,
        provinceId: this.form.province.id,
        cityId: this.form.city.id,
        countyId: this.form.area.id,
        detailedAddress: this.form.addressDetail,
        isDefault: this.toggle?1:0
      }
      if (this.$route.query.action !== 'add') {
        params.id = this.addrId
      }
      this.saveOrUpdate(params)
    }
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_TITLE')
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
@import "../../common/css/component";

.express {
  .mu-text-field-hint{right: 0;}
  @{deep} .mu-text-field-content{
    padding-bottom: 0;
  }
  @{deep} .distpicker-address-wrapper select {
    width: 32%;
  }
  @{deep} .mu-text-field-hint {
    text-align: right;
  }
}
</style>
<style lang="less">
  .demo-popup-bottom{
    width: 100%;
  }
</style>
